﻿<div class="main-content">
    <div>
        <h1>All Products</h1>
        <ul id="products" />
    </div>
    <div>
        <label for="prodId">ID:</label>
        <input type="text" id="prodId" size="5" />
        <input type="button" value="Search" onclick="find();" />
        <p id="product" />
    </div>
</div>
@section  Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            // Send an AJAX request
            // 发送AJAX请求
            $.getJSON("/api/product/",
            function (data) {
                // On success, 'data' contains a list of products.
                // 成功时，'data'含有一组产品列表
                $.each(data, function (key, val) {
                    // Format the text to display.
                    // 格式化文本，以便显示
                    var str = val.ProductName + ': $' + val.Price;
                    // Add a list item for the product.
                    // 添加一个产品列表项
                    $('<li/>', { text: str }).appendTo($('#products'));
                });
            });
        });
        function find() {
            var id = $('#prodId').val();
            $.getJSON("/api/product/" + id,
                function (data) {
                    var str = data.ProductName + ': $' + data.Price;
                    $('#product').text(str);
                })
            .fail(
                function (jqXHR, textStatus, err) {
                    $('#product').text('Error: ' + err);
                });
        }
    </script>
}